<template>
  <div v-if="question">
    <el-form label-width="100px" size="mini">
      <edit-common-module :question="question"></edit-common-module>
      <el-form-item label="行：">
        <el-tag
          v-for="row in question.rows"
          :key="row.text"
          :disable-transitions="false"
          closable
          @close="removeTag(row,'row')">
          {{row.text}}
        </el-tag>
        <el-button size="small" @click="btnShowAdd('row')">+ New</el-button>
      </el-form-item>
      <el-form-item label="列：">
        <el-tag
          v-for="col in question.cols"
          :key="col.text"
          :disable-transitions="false"
          closable
          @close="removeTag(col,'col')">
          {{col.text}}
        </el-tag>
        <el-button size="small" @click="btnShowAdd('col')">+ New</el-button>
      </el-form-item>
      <el-form-item label="开启答案：">
        <el-checkbox v-model="hasAnswerSelect" />
      </el-form-item>
      <el-form-item v-if="hasAnswerSelect" label="答案：">
        <el-tag
          v-for="option in question.options"
          :key="option.key"
          :disable-transitions="false"
          closable
          @close="removeTag(option,'option')">
          {{option.text}}
        </el-tag>
        <el-button size="small" @click="btnShowAdd('option')">+ New</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="添加" v-model="showAddDialog">
      <el-form label-width="80px">
        <el-form-item label="标签">
          <el-input v-model="addForm.type" placeholder="可以不填写" /><span>（不分类可以不填写）</span>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="addForm.name" placeholder="必须填写" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnAdd">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :title="'添加['+addForm.type+']'" :visible.sync="showAddDialog">
      <el-form label-width="80px;" style="margin:auto 20px;" size="mini">
        <el-form-item label="组：">
          <el-input v-model="addForm.key" placeholder="组可选" />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="addForm.text" placeholder="必须填写" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnAdd">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加答案" size="small" :visible.sync="showAddDialog2">
      <el-form label-width="80px;" style="margin:auto 20px;" size="mini">
        <el-form-item label="值：">
          <el-input v-model="addForm2.key" placeholder="必须填写" />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="addForm2.text" placeholder="必须填写" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnAdd2">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import EditCommonModule from "./commonModule";

  export default {
    components: { EditCommonModule },
    name: "edit-i-table",
    props:['question'],
    created(){
      if(this.question.options&&this.question.options.length>0)
        this.hasAnswerSelect=true
    },
    data(){
      return{
        showAddDialog:false,
        showAddDialog2:false,
        hasAnswerSelect:false,
        addForm:{
          type:'',
          key:'',
          text:''
        },
        addForm2:{
          key:'',
          text:''
        }
      }
    },
    methods:{
      btnAdd(){
        if(!this.addForm.text){
          this.$message({type:'error',message:'列/行名称必须填写'})
          return
        }
        if(this.addForm.type === 'row'){
          this.question.rows.push({group:this.addForm.key,text:this.addForm.text});
        }else{
          this.question.cols.push({group:this.addForm.key,text:this.addForm.text});
        }
        this.showAddDialog = false;
      },
      btnAdd2(){
        if(!this.question.options) this.question.options=[]
        if(!this.addForm2.key){
          this.$message({type:'error',message:'值必须填写'})
          return
        }
        if(!this.addForm2.text)
          this.addForm2.text=this.addForm2.key
        this.question.options.push({key:this.addForm2.key,text:this.addForm2.text});
        this.showAddDialog2 = false;
      },
      btnShowAdd(t){
        if(t==='option'){
          this.addForm2.key=''
          this.addForm2.text=''
          this.showAddDialog2=true
        }else{
          this.addForm.type=t;
          this.addForm.key='';
          this.addForm.text='';
          this.showAddDialog = true;
        }
      },
      removeTag(tag,t){
        if(t === 'row'){
          this.question.rows.splice(this.question.rows.indexOf(tag),1);
        }else if(t === 'col'){
          this.question.cols.splice(this.question.cols.indexOf(tag),1);
        }else if(t === 'option'){
          this.question.options.splice(this.question.options.indexOf(tag),1);
        }
      },
      onSubmit() {
        this.$emit('edit', this.question)
      }
    }
  }
</script>

<style lang="scss">

  .el-tag{
    background-color: rgba(64,158,255,.1);
    display: inline-block;
    padding: 0 10px;
    height: 32px;
    line-height: 30px;
    font-size: 12px;
    color: #409eff;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(64,158,255,.2);
    white-space: nowrap;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
</style>
